<script>
import { Plus } from '@element-plus/icons-vue';
import { addBanner } from '@/api/banner.js'
import { ElMessage } from 'element-plus';
export default {
  data () {
    return {
      imageUrl: '',
      formData: {
        alt: '', // 图片提示内容
        link: '', // 点击轮播图要跳转的路径
        img: '', // 图片的地址
      }
    }
  },
  components: {
    Plus
  },
  methods: {
    httpRequest (data) {
      // 选中图片后的回调函数
      console.log('选择文件成功', data.file);
      // URL.createObjectURL() 通过一个 file 创建一个临时的 URL 地址
      // this.imageUrl = URL.createObjectURL(data.file)

      // if (data.file.type !== 'image/png') {
      //   return
      // }

      // 创建一个文件的加载器
      let reader = new FileReader()
      // 指定加载的文件和加载的类型
      // base64
      // 将文件读取成 base64 格式
      reader.readAsDataURL(data.file)

      // 文件读取完成后的回调
      reader.onload = () => {
        // 将读取成功后的 base64 赋值给 imageUrl
        this.imageUrl = reader.result
        this.formData.img = reader.result
      }

    },
    addBannerClick () {

      if (!this.formData.alt || !this.formData.link || !this.formData.img) {

        ElMessage.error('轮播图数据不能为空')

        return
      }

      // 点击添加轮播图的事件
      // 1. 发送数据请求将数据提交到服务器
      addBanner(this.formData).then(res => {
        console.log(res);
        if (res.code == '200') {
          this.formData = {
            alt: '',
            link: '',
            img: ''
          }
          this.imageUrl = ''

          // 提交成功之后进入到轮播图列表页面
          this.$router.push('/banner/bannerlist')

        } else {
          ElMessage.error('轮播图添加失败，请重新提交')
        }
      })
    }
  }
}
</script>
<template>
  <div>
    <p>添加轮播图</p>

    <el-form>
      <el-form-item label="请输入 alt">
        <el-input v-model="formData.alt" />
      </el-form-item>

      <el-form-item label="请输入 link">
        <el-input v-model="formData.link" />
      </el-form-item>

      <el-form-item label="请选择">
        <el-upload class="avatar-uploader" :http-request="httpRequest">
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>

      <el-button @click="addBannerClick">添加</el-button>
    </el-form>

  </div>
</template>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
